<template>
	<div>
		<v-form-render
			:form-json="formJson"
			:form-data="formData"
			:option-data="optionData"
			ref="vFormRef"
		>
		</v-form-render>
		<el-button type="primary" @click="submitForm">Submit</el-button>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

/* 注意：formJson是指表单设计器导出的json，此处演示的formJson只是一个空白表单json！！ */
const formJson = reactive({
	widgetList: [
		{
			key: 45278,
			type: 'input',
			icon: 'text-field',
			formItemFlag: true,
			options: {
				name: '姓名',
				label: '姓名',
				labelAlign: 'label-left-align',
				type: 'text',
				defaultValue: '',
				placeholder: '',
				columnWidth: '200px',
				size: '',
				labelWidth: null,
				labelHidden: false,
				readonly: false,
				disabled: false,
				hidden: false,
				clearable: true,
				showPassword: false,
				required: false,
				requiredHint: '',
				validation: '',
				validationHint: '',
				customClass: [],
				labelIconClass: null,
				labelIconPosition: 'rear',
				labelTooltip: null,
				minLength: null,
				maxLength: null,
				showWordLimit: false,
				prefixIcon: '',
				suffixIcon: '',
				appendButton: false,
				appendButtonDisabled: false,
				buttonIcon: 'custom-search',
				onCreated: '',
				onMounted: '',
				onInput: '',
				onChange: '',
				onFocus: '',
				onBlur: '',
				onValidate: '',
			},
			id: 'input84177',
		},
		{
			key: 45278,
			type: 'input',
			icon: 'text-field',
			formItemFlag: true,
			options: {
				name: '标题',
				label: '标题',
				labelAlign: '',
				type: 'text',
				defaultValue: '',
				placeholder: '',
				columnWidth: '200px',
				size: '',
				labelWidth: null,
				labelHidden: false,
				readonly: false,
				disabled: false,
				hidden: false,
				clearable: true,
				showPassword: false,
				required: false,
				requiredHint: '',
				validation: '',
				validationHint: '',
				customClass: '',
				labelIconClass: null,
				labelIconPosition: 'rear',
				labelTooltip: null,
				minLength: null,
				maxLength: null,
				showWordLimit: false,
				prefixIcon: '',
				suffixIcon: '',
				appendButton: false,
				appendButtonDisabled: false,
				buttonIcon: 'custom-search',
				onCreated: '',
				onMounted: '',
				onInput: '',
				onChange: '',
				onFocus: '',
				onBlur: '',
				onValidate: '',
			},
			id: 'input12311',
		},
		{
			key: 48930,
			type: 'radio',
			icon: 'radio-field',
			formItemFlag: true,
			options: {
				name: '性别',
				label: '性别',
				labelAlign: '',
				defaultValue: 1,
				columnWidth: '200px',
				size: '',
				displayStyle: 'inline',
				buttonStyle: false,
				border: false,
				labelWidth: null,
				labelHidden: false,
				disabled: false,
				hidden: false,
				optionItems: [
					{
						label: '男',
						value: 1,
					},
					{
						label: '女',
						value: 2,
					},
				],
				required: false,
				requiredHint: '',
				validation: '',
				validationHint: '',
				customClass: '',
				labelIconClass: null,
				labelIconPosition: 'rear',
				labelTooltip: null,
				onCreated: '',
				onMounted: '',
				onChange: '',
				onValidate: '',
			},
			id: 'radio100712',
		},
	],
	formConfig: {
		modelName: 'formData',
		refName: 'vForm',
		rulesName: 'rules',
		labelWidth: 80,
		labelPosition: 'left',
		size: '',
		labelAlign: 'label-left-align',
		cssCode: '',
		customClass: [],
		functions: '',
		layoutType: 'PC',
		jsonVersion: 3,
		onFormCreated: '',
		onFormMounted: '',
		onFormDataChange: '',
	},
});
const formData = reactive({});
const optionData = reactive({});
const vFormRef = ref(null);

const submitForm = () => {
	vFormRef.value
		.getFormData()
		.then((formData) => {
			// Form Validation OK
      console.log(formData);
			// alert(JSON.stringify(formData));
		})
		.catch((error) => {
			// Form Validation failed
			ElMessage.error(error);
		});
};
</script>

<style lang="css" scoped>
body {
	margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
